<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar title="密码登录" nav-bar-text-color="red" left-arrow>
      <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.back()" />
      </template>
    </van-nav-bar>
    <!-- 账号密码输入 -->
    <div class="inputs">
      <div class="bd top">
        <van-field v-model="user.username" placeholder="请输入手机号" />
      </div>
      <div class="bd">
        <van-field
          v-model="user.password"
          placeholder="密码"
          :type="checked ? 'text' : 'password'"
        >
          <template #button>
            <van-switch
              :value="checked"
              @input="onInput"
              size="20px"
              inactive-color="#ccc"
            />
          </template>
        </van-field>
      </div>
    </div>
    <section class="confirm">
      <van-field v-model="user.captcha_code" placeholder="输入验证码">
        <template #extra>
          <div class="yzm">
            <img :src="yangz.code" alt="" />
          </div>
          <div class="right">
            <p>看不清</p>
            <p class="change" @click="changeFn">换一张</p>
          </div>
        </template>
      </van-field>
    </section>
    <div class="tip">
      <p>温馨提示：未注册过的账号，登录时将自动注册</p>
      <p>注册过的用户可凭账号密码登录</p>
    </div>
    <!-- 登录按钮 -->
    <div style="margin: 16px">
      <van-button block type="primary" native-type="submit" @click="loadFn"
        >登录</van-button
      >
    </div>

    <p class="tips">
      <a href="javascript:void(0);" class="">重置密码</a>
    </p>
    <!-- </van-form> -->
  </div>
</template>


<script>
import { Toast } from "vant";
import { captchas, login } from "@/api/login";
export default {
  data() {
    return {
      text: "",
      user: {
        username: "13682830907",
        password: "123",
        captcha_code: "",
      },
      yangz: {},
      checked: false,
    };
  },
  methods: {
    onInput() {
      this.checked = !this.checked;
    },
    changeFn() {
      this.getyangz();
    },
    getyangz() {
      captchas().then((res) => {
        this.yangz = res.data;
      });
    },
    loadFn() {
      if (!this.user.username || !this.user.password) {
        this.$toast.fail("账号或者密码错误！");
        return;
      }
      if (!this.user.captcha_code) {
        this.$toast.fail("验证码错误");
        return;
      }
      // console.log(this.yangz);
      // if (this.user.captcha_code != this.yangz.code) {
      //   this.$toast.fail("验证码错误");
      //   return;
      // }
      //登录成功
      login(this.user).then((res) => {
        console.log(104, res);
        if (!res.data.username) {
          this.$toast.fail("用户名或密码错误");
        } else {
          localStorage.setItem("Userid", res.data.user_id);
          this.$router.push({
            path: "/",
          });
        }
      });
    },
    onClickLeft() {
      Toast("返回");
    },
    // 登录按钮
    onSubmit(values) {
      console.log("submit", values);
    },
  },
  created() {
    this.getyangz();
  },
};
</script>

<style lang="less" scoped>
.van-switch {
  margin-top: 5px;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
.van-nav-bar {
  background-color: #3190e8;
  color: #fff;
  .van-icon {
    color: #fff;
  }
}
.inputs {
  // margin-left: 0.8333rem;
  .top {
    margin-top: 15px;
  }
  .van-field {
    border-bottom: 1px solid #ccc;
    height: 54px;
  }
}
.tips {
  text-align: right;
  margin-right: 0.8333rem;
  margin-top: 30px;
  a {
    color: #3385ff;
  }
}

.confirm {
  display: flex;
  height: 54px;
  line-height: 54px;
  display: flex;
  .yzm {
    display: flex;
    flex-direction: row;
    height: 40px;
    img {
      width: 80px;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    p {
      text-align: center;
      font-size: 12px;
      line-height: 20px;
      margin-left: 5px;
    }
    .change {
      color: #3190e8;
    }
  }
}
.tip {
  color: red;
  font-size: 12px;
  margin-left: 12px;
  p {
    margin-top: 10px;
  }
}
</style>
